<template>
  <div class="container">
    <div class="item_wrap">
      <span>输入成本比例：</span>
      <InputNumber v-model="batchSetDataVo.costPriceRatio" size="mini" controls-position="right" />
    </div>
    <div class="item_wrap">
      <span>参照城市：</span>
      <ReferCitySelect
        :value.sync="batchSetDataVo.templateCityUuid"
        @getCityInfo="updateBatchSetDataVo"
      />
    </div>
    <div class="item_wrap">
      <el-button type="primary" size="mini" @click="handleConfirm">批量设置</el-button>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import InputNumber from '@/components/inputNumber/inputNumber';
import ReferCitySelect from './ReferCitySelect';
export default {
  components: {
    InputNumber,
    ReferCitySelect
  },
  computed: {
    ...mapState('commonComps/referCitiesUpdate', [
      'batchSetDataVo', // 批量设置数据实例对象
    ]),
  },
  methods: {
    ...mapMutations('commonComps/referCitiesUpdate', [
      'UPDATE_BATCH_SET_DATA_VO', // 更新批量设置数据实例对象
    ]),
    updateBatchSetDataVo (cityInfo) {
      this.UPDATE_BATCH_SET_DATA_VO(cityInfo)
      this.$emit('update-city', cityInfo)
    },
    // 确定
    handleConfirm () {
      this.$emit('confirm', this.batchSetDataVo)
    },
    clear () {
      this.UPDATE_BATCH_SET_DATA_VO({
        costPriceRatio: null,
        templateCityUuid: '',
        templateCityName: ''
      })
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  display: flex;
  .item_wrap {
    display: flex;
    &:not(:first-child) {
      margin-left: 20px;
    }
  }
}
</style>
